<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>${s_UserPharmacy.pharmacy.name}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>

<script type="text/javascript">
	
	$(document).ready(function(){
		$("#dialogo").dialog({
			autoOpen: false,
	        title: "Almacén",
			height: 350,
			width: 550,
			modal: true,
			buttons: {
	            "Aceptar": function() {
	            	$( this ).dialog( "close" );
	            },
	            Cancelar: function() {
	                $( this ).dialog( "close" );
	            }
			},
			close: function() {
			}
		});	
		
		
		
		$("#_providerId").change(function(){
			if($("#_providerId").val() != ''){
				$("#_providerId option:selected").each(function (){
					mainVisitors($(this).val());
		        });
	        }else{
	       		location.href = "visitors?_menuId=2&_subMenuId=4&_optionId=2";
	        }
	    });	
		
	});
	
	function showFormVisitorAdd(){		
		$('#formDialog').each(function(){
            this.reset();
        });        
        $("#titleForm").text("Nuevo Almacén");
        $("#dialog:ui-dialog").dialog("destroy");
        $("#dialogo").dialog("open");
	}	
	
	function newUserProvider(providerId){
    	location.href = "visitorsNew?_menuId=2&_subMenuId=4&_optionId=2&_providerId="+providerId;
	}
	
	function editUserProvider(providerId,userProviderId){
    	location.href = "visitorsEdit?_menuId=2&_subMenuId=4&_optionId=2&_providerId="+providerId+"&_userProviderId="+userProviderId;
	}
	function giveLow(providerId,userProviderId,name){		
	    if(confirm("¿Estas seguro de dar de baja al Visitador: "+name+"?")){
            $.ajax({
                url: "ajaxGiveLowOrHighToVisitors",
                type: "GET",
                data:{providerId:providerId,userProviderId:userProviderId,active:false},
                beforeSend:function(obj){
                    $('#listUser').css({display:'none'});
                    $('#imgLoad').css({display:'block'});
                },
                success:function(res){
                	alert(res);
                	mainVisitors(providerId);
                },
                complete:function(){
                    $('#imgLoad').css({display:'none'});
                    $("#listUser").css({display:'block'});
                },
                error: function(res){ alert("Error! al dar de Baja"); }
            });
        }
	}
	function giveHigh(providerId,userProviderId,name){
		if(confirm("¿Estas seguro de dar de alta al Visitador: "+name+"?")){
            $.ajax({
                url: "ajaxGiveLowOrHighToVisitors",
                type: "GET",
                data:{providerId:providerId,userProviderId:userProviderId,active:true},
                beforeSend:function(obj){
                    $('#listUser').css({display:'none'});
                    $('#imgLoad').css({display:'block'});
                },
                success:function(res){
                	alert(res);
                	mainVisitors(providerId);
                },
                complete:function(){
                    $('#imgLoad').css({display:'none'});
                    $("#listUser").css({display:'block'});
                },
                error: function(res){ alert("Error! al dar de Alta"); }
            });
        }
	}
	
	function removeVisitors(providerId,userProviderId,name){
		if(confirm("¿Esta seguro de eliminar al visitador ''"+name+"''?")){
		     $.ajax({
		     	url: "removeVisitor",
		        type: "GET",
		        data:{providerId:providerId,userProviderId:userProviderId, name:name},
		        success:function(res){
		           location.href= "visitors?_menuId=2&_subMenuId=4&_optionId=2&_providerId="+providerId;
		     },
		     error: function(res){ alert("Error! al eliminar al visitador."); }
		   });
		 }
	}
	
	
	function mainVisitors(providerId){
		location.href = "visitors?_menuId=2&_subMenuId=4&_optionId=2&_providerId="+providerId;
	}
	
	function showHide(){
	    if( $("#low").css('display') == 'none' ){
	        $("#low").css('display', 'block');
	        $("#showHide").attr('value', 'Ocultar Bajas');
	        $("#showHide").attr('title', 'Pulsa aqui para ocultar bajas')
	    }else{
	        $("#low").css('display', 'none');
	        $("#showHide").attr('value', 'Mostrar Bajas');
	        $("#showHide").attr('title', 'Pulsa aqui para mostrar bajas')
	    }
	}
</script>
</head>

<body>
<div id="top-wrap">
	<%@include file="../../../head.jsp"  %>
	<div id="bodySpace">
		
	    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
	        <!-- aqui va el arbol de entrada -->
	        <div id="breadcrumb">
	            <ul>
                	<li><a href="<spring:url value="/mainFront?" htmlEscape="true" />">Home</a></li>	
                    <li><span style="color:#666"><fmt:message key="title.admin"/></span></li>
                    <li><span style="color:#666"><fmt:message key="title.providers"/></span></li>
                    <li class="current-page"><span class="end"><span class="middle"><fmt:message key="title.adminVisitors"/></span></span></li>
                </ul>
	        </div>
	    </div>
	    
	    <div id="principal">
            <!-- izquierda -->
            <div class="cuerpo2y" style="border: 0px solid"><br/><br/>
                <div class="izq">
					<%@include file="../../../bodyIzq.jsp" %>	
                </div>
                
                <div class="medio" style="border: 0px solid">
					
					
					<div id="imgLoad" style="float: left;width: 100%;display: none;"><img src="<c:url value="/resources/images/imgLoad/ajax-loader.gif" />" width="32" height="32" alt="ajax-loader.gif" style="position:absolute; top:30%; left:50%;"/></div> 
					<div id="visitors">
						<br/><br/>
						<table class="miReporte" style="width: 100%">
							<tr>
								<td>
									<label for="_providerId" ><b><fmt:message key="form.provider"/> :</b></label>					
									<select name="_providerId" id="_providerId"  title="<fmt:message key="show.form.selected.provider"/>">
										<option value=""><fmt:message key="show.form.selected"/></option>
										<c:forEach var="item" items="${listProvider}">
											<c:set var="selec" value="" />
		                               		<c:if test="${param._providerId == item.providerId}">
		                                		<c:set var="selec" value="selected='selected'" />
		                               		</c:if>
											<option value="${item.providerId}" ${selec}>${item.name}</option>    
										</c:forEach>
									</select>
								</td>
							</tr>
						</table>
						<c:if test="${param._providerId != null}" >
							<h3 class="decorado"><fmt:message key="title.list.visitors"/></h3></br>
							<table class="miReporte" style="width: 100%">
								<tr>
									<td style="text-align: right"><input type="button" class="boton" value="<fmt:message key="button.add"/> <fmt:message key="title.visitor"/>" onclick="newUserProvider('${param._providerId}')" title='<fmt:message key="onclick.add"/> <fmt:message key="title.visitor"/>.'/></td>
								</tr>
							</table>						
						</c:if>
						<c:if test="${(not empty listUserProviderActive) || (not empty listUserProviderInactive)}" >
							<table class="tabla_decorado" style="width: 100%">
								<thead>
									<tr>
										<th width="4%" class="th_decoradoRowspan"><fmt:message key="table.num"/></th>
										<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.name"/></th>
										<th width="17%" class="th_decoradoRowspan"><fmt:message key="table.lastNames"/></th>
										<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.ci"/></th>
										<th width="4%" class="th_decoradoRowspan"><fmt:message key="table.gender"/></th>	
										<th width="12%" class="th_decoradoRowspan"><fmt:message key="table.phone"/>/<fmt:message key="table.cellular"/></th>	
										<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.email"/></th>
										<th width="12%" class="th_decoradoRowspan"><fmt:message key="table.address"/></th>
										<th width="5%" class="th_decoradoRowspan"><fmt:message key="table.picture"/></th>
										<th width="7%" class="th_decoradoRowspan"><fmt:message key="table.actions"/></th>
									</tr>
								</thead>
								<tbody>
									<c:set var="i" value="1"/>
									<c:forEach var="item" items="${listUserProviderActive}"> 
										<tr class="tr_decorado">
											<td class="th_decorado" style="text-align: center">${i}</td>
											<td class="th_decorado">${item.name}</td>
											<td class="th_decorado">${item.lastName} ${item.lastName2}</td>
											<td class="th_decorado">${item.ci}</td>
											<td class="th_decorado">${item.genero}</td>
											<td class="th_decorado">${item.phone}  ${item.cellphone}</td>
											<td class="th_decorado">${item.email}</td>
											<td class="th_decorado">${item.address}</td>
											<c:choose>
									            <c:when test="${item.picture != null}">
									            	<td class="th_decorado" style="text-align: center"><img src="<c:url value="/${item.picture}"/>" border="1" height="20" width="20"/></td>
									            </c:when>
									            <c:otherwise>
									            	<c:choose>												
									            		<c:when test="${item.genero.toString() == 'M'}">	
									            			<td class="th_decorado" style="text-align: center"><img src="<c:url value="/resources/image/men.png"/>" border="1" height="20" width="20"/></td>
									            		</c:when>
									            		<c:otherwise>
									            			<td class="th_decorado" style="text-align: center"><img src="<c:url value="/resources/image/women.png"/>" border="1" height="20" width="20"/></td>
									            		</c:otherwise>
									            	</c:choose>
									            </c:otherwise>
								            </c:choose>
											<td class="td_decoradoDerecha" style="text-align: center">
												<input type="button" value="<fmt:message key="button.edit"/>" onclick="editUserProvider('${item.userproviderPK.providerId}','${item.userproviderPK.userProviderId}')" class="botonRep" title="<fmt:message key="onclick.edit"/> ${item.name}"/>
												<input type="button" value="<fmt:message key="button.low"/>" onclick="giveLow('${item.userproviderPK.providerId}','${item.userproviderPK.userProviderId}','${item.name}')" class="botonRep" title="<fmt:message key="onclick.low"/> ${item.name}"/>
												<input type="button" value="<fmt:message key="button.remove"/>" onClick="removeVisitors('${item.userproviderPK.providerId}','${item.userproviderPK.userProviderId}' ,'${item.name}')" class="botonRep" title="<fmt:message key="onclick.remove"/> ${item.name}"/> 
											</td>
										</tr>
										<c:set var="j" value="1"/>
										<c:set var="i" value="${i+j}"/>
									</c:forEach>
								</tbody>
							</table>
							<table class="miReporte" style="width: 100%">
								<tr>
									<td style="text-align: right"><input type="button" name="showHide" id="showHide" value="<fmt:message key="show.low"/>" onclick="showHide()" class="boton" title="<fmt:message key="onclick.show.lows"/>"/></td>
								</tr>
							</table><br/><br/>	
							<c:choose>
								<c:when test="${(not empty listUserProviderInactive)}" >
									<div id="low" style="display:none;">
										<!-- <center> -->
										<h2 class="decorado"><fmt:message key="show.visitorsGiveLow"/></h2>
										<table class="tabla_decorado" style="width: 100%">
											<thead>
												<tr>
													<th width="4%" class="th_decoradoRowspan"><fmt:message key="table.num"/></th>
													<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.name"/></th>
													<th width="17%" class="th_decoradoRowspan"><fmt:message key="table.lastNames"/></th>
													<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.ci"/></th>
													<th width="4%" class="th_decoradoRowspan"><fmt:message key="table.gender"/></th>	
													<th width="12%" class="th_decoradoRowspan"><fmt:message key="table.phone"/>/<fmt:message key="table.cellular"/></th>	
													<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.email"/></th>
													<th width="13%" class="th_decoradoRowspan"><fmt:message key="table.address"/></th>
													<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.picture"/></th>
													<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.actions"/></th>
												</tr>
											</thead>
											<tbody>
												<c:set var="i" value="1"/>
												<c:forEach items="${listUserProviderInactive}" var="item">
													<tr class="tr_decorado">
														<td class="th_decorado" style="text-align: center">${i}</td>
														<td class="th_decorado">${item.name}</td>
														<td class="th_decorado">${item.lastName} ${item.lastName2}</td>
														<td class="th_decorado">${item.ci}</td>
														<td class="th_decorado">${item.genero}</td>
														<td class="th_decorado">${item.phone}  ${item.cellphone}</td>
														<td class="th_decorado">${item.email}</td>
														<td class="th_decorado">${item.address}</td>
														<c:choose>
												            <c:when test="${item.picture != null}">
												            	<td class="th_decorado" style="text-align: center"><img src="<c:url value="/${item.picture}"/>" border="1" height="20" width="20"/></td>
												            </c:when>
												            <c:otherwise>
												            	<c:choose>												
												            		<c:when test="${item.genero.toString() == 'M'}">	
												            			<td class="th_decorado" style="text-align: center"><img src="<c:url value="/resources/image/men.png"/>" border="1" height="20" width="20"/></td>
												            		</c:when>
												            		<c:otherwise>
												            			<td class="th_decorado" style="text-align: center"><img src="<c:url value="/resources/image/women.png"/>" border="1" height="20" width="20"/></td>
												            		</c:otherwise>
												            	</c:choose>
												            </c:otherwise>
											            </c:choose>
														<td class="td_decoradoDerecha" style="text-align: center"><input type="button" value="<fmt:message key="button.high"/>" onclick="giveHigh('${item.userproviderPK.providerId}','${item.userproviderPK.userProviderId}','${item.name}')" class="botonRep" title="<fmt:message key="onclick.high"/> ${item.name}"/></td>
													</tr>
													<c:set var="j" value="1"/>
													<c:set var="i" value="${i+j}"/>
												</c:forEach>                              		
											</tbody>
										</table>
									</div>									
								</c:when>
								<c:otherwise>
									<p style='text-align:center;color:blue'>
										<fmt:message key="show.noExistVisitorsGiveLow"/>
									</p>
								</c:otherwise>
							</c:choose>
						</c:if>	
						
					</div>	                               
                </div>
            </div><!--end of leftPan-->
            
            <div class="yDer" style="border: 1px solid #ccc;">
                  <%@include file="../../../notices.jsp" %>                       
            </div><!--end of rightPan-->
        </div><!--end main content -->
	</div>
</div>
</body>
</html>
